<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
	<style>
.rf-panel-header {
	color: #0054BD;
}

.panel {
	vertical-align: top;
}

.top {
	width: 200px;
	height: 100px;
}

.head2 {
	background-image: url();
	background-color: #4C9600;
	height: 18px;
	text-align: center;
	vertical-align: middle;
	color: #CFF;
	padding: 4px 0;
}

.body3 {
	height: 100px;
	overflow: auto;
}
</style>
	<h:panelGrid columnClasses="panel" border="0" columns="2">
		<rich:panel>
			<f:facet name="header">
                    Panel #1. Changing Style Synchronously
            </f:facet>
                Each component in RichFaces has a pre-defined set of CSS classes you can manipulate. If defined, those
                classes overwrite the ones that come from the skin.
        </rich:panel>

		<rich:panel>
			<f:facet name="header">
                    Panel #2. Changing Style Synchronously
            </f:facet>
                In this example, we define header color using the .rf-panel-header class and all panels located on the same page
                inherit this color
            </rich:panel>

	</h:panelGrid>

	<h:panelGrid columnClasses="panel" border="0" columns="3">
		<rich:panel
			onmouseover="document.getElementById(this.id+'_header').style.background='#60BA01';document.getElementById(this.id+'_body').style.background='#F4FFF8'"
			onmouseout="document.getElementById(this.id+'_header').style.background='#4C9600';document.getElementById(this.id+'_body').style.background='#E4FFC8'"
			style="width:200px;" headerClass="head2" bodyClass="body3">
			<f:facet name="header">
                Panel header
            </f:facet>
            Base on the previous layout, but with javascript visual effects added.
        </rich:panel>

		<rich:panel style="width:200px;" bodyClass="body3">
			<f:facet name="header">
                Scrolling Text Panel
            </f:facet>
         Long Text Long Text Long Text
         Long Text Long Text Long Text
         Long Text Long Text Long Text
         Long Text Long Text Long Text
         Long Text Long Text Long Text
         Long Text Long Text Long Text
         Long Text Long Text Long Text
         Long Text Long Text Long Text
         Long Text Long Text Long Text
         Long Text Long Text Long Text
         Long Text Long Text Long Text
         Long Text Long Text Long Text
         Long Text Long Text Long Text
        </rich:panel>

		<rich:panel styleClass="top">
            This is a panel without the header     
        </rich:panel>

	</h:panelGrid>
</ui:composition>